<template>
  <a-card title="谷歌绑定">
    <a-timeline v-if="!google_info.bind">
      <a-timeline-item>
        <div class="blue-title">第一步：下载Google身份验证APP</div>
        <div>
          未绑定: 您未绑定谷歌验证<br />提示:为了您的资金安全，请尽快绑定谷歌验证码!<br />
          手机客户端下载地址:<br />
          <a :href="google_info.appSrc">{{ google_info.appSrc }}</a>
        </div>
      </a-timeline-item>
      <a-timeline-item>
        <div class="blue-title">第二步：在Google身份验证中添加密钥，获取授权码</div>
        <div>请使用Google身份验证器扫描下方二维码</div>
        <div>
          <a-qrcode :value="google_info.googleUrl" />
        </div>
        <div
          >扫描不了？使用账号+密钥获取<br />用户账号: {{ getUserInfo.username }}<br />谷歌密钥:
          {{ google_info.google_token }}<br />
          <span style="color: #f50">绑定成功后密钥将不再展示，请自行备份保存</span></div
        >
      </a-timeline-item>
      <a-timeline-item>
        <div class="blue-title">第三步：输入Google验证器中的验证码</div>
        <div style="max-width: 500px">
          <a-input-group compact>
            <a-input-password
              placeholder="请输入谷歌验证码"
              v-model:value="googleCode"
              style="width: calc(100% - 200px)"
            />
            <a-button type="primary" @click="editGoogleFunc(1)">绑定</a-button>
          </a-input-group>
        </div>
      </a-timeline-item>
    </a-timeline>
    <div v-else>
      <div style="margin-bottom: 16px; font-size: 20px; font-weight: bold">您已绑定谷歌验证码</div>
      <div style="max-width: 500px">
        <a-input-group compact>
          <a-input-password
            placeholder="请输入谷歌验证码"
            v-model:value="googleCode"
            style="width: calc(100% - 200px)"
          />
          <a-button @click="editGoogleFunc(0)" type="primary">解绑</a-button>
        </a-input-group>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { GetGoogleApi, EditGoogleApi } from '@/api/user';
  import { useUserStore } from '@/store/modules/user';
  import message from '@/views/form-design/utils/message';

  const google_info = ref({});
  const googleCode = ref('');
  const { getUserInfo, logout } = useUserStore();
  onMounted(async () => {
    const data = await GetGoogleApi();
    google_info.value = data;
  });
  const editGoogleFunc = async (use_google: number) => {
    if (!googleCode.value || googleCode.value == '') {
      message.error('请输入谷歌验证码');
      return;
    }
    try {
      await EditGoogleApi({ use_google, google_token: googleCode.value });
      message.success('修改成功');
      localStorage.removeItem('openGoogle');
      logout();
    } catch (error) {
      message.error('修改失败');
    }
  };
</script>

<style scoped lang="less">
  .ant-card + .ant-card {
    margin-top: 16px;
  }

  .blue-title {
    color: #40a9ff;
    font-weight: bold;
  }
</style>
